<template>
  <div class="add-question">
    <div v-if="has()">
      <div><span>* </span>质疑变量:</div>
      <div>
        <el-select size="mini" v-model="col" :clearable="true" placeholder="" value-key="variable">
          <el-option
            v-for="tableField in exOptions.tableFieldList"
            :key="tableField.variable"
            :label="tableField.variableName"
            :value="tableField"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div>
      <div><span>* </span>质疑原因：</div>
      <div>
        <el-select v-model="value" style="width: 100%" :clearable="true" placeholder="" size="mini">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
    </div>
    <div>
      <div><span>* </span>质疑说明：</div>
      <div>
        <el-input size="mini" type="textarea" v-model="textarea" :rows="4"></el-input>
      </div>
    </div>
    <div>
      <el-button
        size="mini"
        type="primary"
        :disabled="has() ? !col || !textarea || !value : !textarea || !value"
        @click="submit"
        >增加</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  props: {
    tableStatus: {
      type: Object,
    },
    tableField: {
      type: Object,
    },
    exOptions: {
      type: Object,
    },
    queryType: {
      type: String,
    },
    variableName: {
      type: String,
    },
  },
  data() {
    return {
      options: [
        {
          value: '日期时间问题',
          label: '日期时间问题',
        },
        {
          value: '完整性问题',
          label: '完整性问题',
        },
        {
          value: '逻辑性问题',
          label: '逻辑性问题',
        },
        {
          value: '准确性问题',
          label: '准确性问题',
        },
        {
          value: '表头质疑',
          label: '表头质疑',
        },
      ],
      value: '',
      textarea: '',
      col: null,
      projectId: '',
      roleId: '',
      environment: '',
    }
  },
  computed: {
    ...mapState({
      subjectInfo: state => state.treatment.subjectInfo,
      visit: state => state.treatment.visit,
      table: state => state.treatment.table,
    }),
    ...mapGetters({
      findRole: 'treatment/findRole',
    }),
  },
  created() {
    this.projectId = localStorage.getItem('sys-project-id')
    this.roleId = localStorage.getItem('roleId')
    this.environment = localStorage.getItem('environment')
  },
  methods: {
    ...mapActions('eCRFDetail', ['addQueryAPI']),
    has: function () {
      if (this.exOptions) {
        return Reflect.has(this.exOptions, 'tableFieldList')
      } else {
        return false
      }
    },
    submit: async function () {
      let data = {
        projectId: this.projectId,
        databaseId: this.subjectInfo.databaseId,
        databaseVersion: this.subjectInfo.databaseVersion,
        coreId: this.subjectInfo.coreId,
        subjectId: this.subjectInfo.id,
        visitId: this.visit.id,
        tableId: this.table.id,
        tableName: this.table.tableName,
        queryContent: this.textarea,
        queryReasonType: this.value,
        queryType: this.queryType,
        environment: this.environment,
        roleId: this.roleId,
        formDataId: this.tableStatus.formDataId,
        environment: localStorage.getItem('environment'),
        subjectTableId: this.table.id
      }
      // 普通字段
      if (this.queryType === '1' && !this.variableName) {
        data.formFieldId = this.tableField.formFieldId
        data.variableId = this.tableField.variableId
        data.variableValue = this.tableField.variableValue
        data.variableName = this.tableField.variableName
      }
      // 内嵌表
      if (this.variableName) {
        data.tableName = this.variableName
        data.formDataId = this.exOptions.tableFieldList[0].formDataId
        data.formFieldId = this.col.formFieldId
        data.tableId = this.exOptions.tableFieldList[0].formDataId
      }
      const res = await this.addQueryAPI({ data })
      if (res.code === 200) {
        this.$message.success('新增成功！')
        this.$emit('callback')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.add-question {
  .el-input,
  .el-select {
    width: 200px;
  }
  > div {
    display: flex;
    margin-bottom: 1rem;
    > div {
      text-align: left;
      font-size: 0.75rem;
      color: black;
      &:first-child {
        flex: 0.5;
        > span {
          color: #f56c6c;
        }
      }
      &:last-child {
        flex: 2;
      }
    }
    &:last-child {
      justify-content: flex-end;
      margin-bottom: 0;
    }
  }
}
</style>
